<template>
    <div class="table">
        <div class="container">
<!--            <div class="handle-box" style="text-align: right">-->
<!--                &lt;!&ndash;<el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>&ndash;&gt;-->
<!--                &lt;!&ndash;<el-button type="primary" icon="search" @click="search">搜索</el-button>&ndash;&gt;-->
<!--                <el-button type="primary" @click="add" style="">添加特权</el-button>-->
<!--            </div>-->
            <el-table :data="tableData" border class="table" ref="multipleTable">
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="content" label="内容">
                </el-table-column>
                <el-table-column label="图片">
                    <template slot-scope="scope">
                        <img v-for="url in scope.row.img_url.split(',')" :src="url + '?x-oss-process=image/resize,w_30,h_30'" @click="showImg(url)">
                    </template>
                </el-table-column>
                <el-table-column prop="views_num" sortable label="浏览量">
                </el-table-column>
                <el-table-column prop="comment_num" sortable label="评论数量">
                </el-table-column>
                <el-table-column prop="thumbs_num" sortable label="点赞数量">
                </el-table-column>
                <el-table-column prop="tread_num" sortable label="踩的数量">
                </el-table-column>
                <el-table-column prop="user_nick" label="用户昵称">
                </el-table-column>
                <el-table-column prop="user_name" label="用户姓名">
                </el-table-column>
                <el-table-column label="性别">
                    <template slot-scope="scope">
                        <span v-if="scope.row.sex == '1'">男</span>
                        <span v-if="scope.row.sex == '2'">女</span>
                    </template>
                </el-table-column>
                <el-table-column label="头像">
                    <template slot-scope="scope">
                        <img :src="scope.row.head_url+'?x-oss-process=image/resize,w_30,h_30'" alt="头像" style="">
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" sortable label="发布日期">
                </el-table-column>
                <el-table-column label="管理" align="center" fixed="right" width="150">
                    <template slot-scope="scope">
                        <div>
                            <el-button type="text" icon="el-icon-view" @click="handleLook(scope.$index, scope.row)">回复查看</el-button>
                            <el-button type="text" icon="el-icon-view" @click="handleThumbs(scope.$index, scope.row)">点赞查看</el-button>
                            <el-button type="text" icon="el-icon-view" @click="handleTread(scope.$index, scope.row)">踩查看</el-button>
                            <!--                            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!--<div class="pagination">-->
            <!--<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="1000">-->
            <!--</el-pagination>-->
            <!--</div>-->
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    :page-size="pageSize"
                    layout="total, prev, pager, next"
                    :total="totalRow">
                </el-pagination>
            </div>
        </div>

        <!-- 查看图片弹出框 -->
        <el-dialog title="图片" :visible.sync="editVisible" width="60%" top="10%">
            <div><img :src="img" alt="" style="width: 100%;"></div>
        </el-dialog>

        <!-- 回复弹出框 -->
        <el-dialog title="回复" :visible.sync="editVisible1" width="70%">
            <forumComments :uid="forumId" ref="forumComments"></forumComments>
        </el-dialog>
        <!-- 点赞弹出框 -->
        <el-dialog title="点赞" :visible.sync="editVisible2" width="70%">
            <forumThumbs :uid="forumId" ref="forumThumbs"></forumThumbs>
        </el-dialog>
        <!-- 踩弹出框 -->
        <el-dialog title="踩" :visible.sync="editVisible3" width="70%">
            <forumTread :uid="forumId" ref="forumTread"></forumTread>
        </el-dialog>
    </div>
</template>

<script>
    import forumComments from '@/components/forum/Forum-comments';
    import forumThumbs from '@/components/forum/Forum-thumbs';
    import forumTread from '@/components/forum/Forum-tread';
    export default {
        components:{
            forumComments,
            forumThumbs,
            forumTread,
        },
        name: 'basetable',
        data() {
            return {
                select_word: '',
                tableData: [],
                cur_page: 1,
                multipleSelection: [],
                editVisible: false,
                editVisible1: false,
                editVisible2: false,
                editVisible3: false,

                forumId: '',

                img: '',
                pageSize: 0,
                totalRow: 0,
                currentPage1: 0,
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {
            }
        },
        methods: {
            loadopen() {
                this.loading = this.$loading({
                    lock: true,
                    text: 'Loading',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.2)'
                });
                setTimeout(() => {this.loading.close();}, 5000);
            },
            loadclose() {
                this.loading.close();
            },
            // 查看图片
            showImg(url){
                this.editVisible = true;
                this.img = url;
            },
            // 获取列表数据
            getData(pageNumber) {
                this.loadopen();
                this.config.post('/housinggestate/housinggestate/dynamic/findPage', {
                    pageNum: pageNumber?pageNumber:1,
                }).then(res=>{
                    this.loadclose();
                    if(res.data.code==='0'){
                        this.tableData = res.data.page.list;
                        this.pageSize = res.data.page.pageSize;
                        this.totalRow = res.data.page.totalRow;
                        this.currentPage1 = res.data.page.pageNumber;
                        // this.tableData = res.data.roleList;
                    }else {
                        this.$message.error(this.config.handleError(res.data));
                    }
                })
            },
            search() {
            },
            // 分页导航
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.getData(val);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            // 查看回复
            handleLook(index, row) {
                this.editVisible1 = true;
                this.forumId = row.id;
                setTimeout(()=>{
                    this.$refs.forumComments.getInfo();
                }, 100);
            },
            // 查看点赞
            handleThumbs(index, row){
                this.editVisible2 = true;
                this.forumId = row.id;
                setTimeout(()=>{
                    this.$refs.forumThumbs.getInfo();
                }, 100);
            },
            // 查看踩
            handleTread(index, row){
                this.editVisible3 = true;
                this.forumId = row.id;
                setTimeout(()=>{
                    this.$refs.forumTread.getInfo();
                }, 100);
            },
            // handleDelete(index, row) {
            //     this.$confirm('确定删除此特权?', '提示', {
            //         confirmButtonText: '确定',
            //         cancelButtonText: '取消',
            //         type: 'warning'
            //     }).then(() => {
            //         this.loadopen();
            //         // console.log(row.id)
            //         this.config.post('/admin/noble/privilege/delete', {id: row.id}).then(res=>{
            //             this.loadclose();
            //             if(res.data.code==='0'){
            //                 this.$message.success(res.data.message);
            //                 this.getData();
            //             }else {
            //                 this.$message.error(this.config.handleError(res.data));
            //             }
            //         });
            //     }).catch(() => {
            //     });
            // },
            privilegeDone(str) {
                this.editVisible = false;
                this.getData();
            },
            // 保存编辑
            saveEdit() {
            },
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
</style>
